<template>
  <div class="takeout">
     <div class="takeoutHeader">
       <h1><img src="dingyi/takeout-zuojiantou.png" alt=""></h1>
     <input type="text" placeholder="iPhone 12 优惠 1200元">
     <button>搜索</button>
     </div>
     <div class="takeoutMain">
      <ul class="takeoutMain1">
        <li v-for="(v,i) in this.$store.state.takeoutm.arr" :key="i">
          <h2><img :src="v.urlimg"></h2>
          <p>{{v.title}}</p>
        </li>
      </ul>
      <div class="takeoutMain2">
        <div class="takeoutMain2title">
          <h2><img src="dingyi/takeout-haohuo5.png"></h2>
          <h3><img src="dingyi/takeout-haohuo6.png"></h3>
          <span>吃完逛一逛<h4><img src="dingyi/takeout-youjiantou.png"></h4></span>
        </div>
        <ul class="takeoutMain2content">
        <li v-for="(v,i) in this.$store.state.takeoutm.brr" :key="i">
          <h1><img :src="v.urlimg"></h1>
          <span>{{v.discount}}</span>&nbsp;
          <del>{{v.price}}</del>
        </li>
        </ul>
     </div>
     <div class="takeoutMain3">
        <!-- 轮播图 -->
      </div>
      <div class="takeoutMain4">
        <router-link to="/takeouta">附近商家</router-link>
        <router-link to="/takeoutb">发现好菜</router-link>
        <router-view></router-view>
      </div>
     </div>

  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
  .takeout{
    width: 100%;
    height: 3000px;
    background: #f5f5f6;
  }
  .takeout{
    width: 375px;
  }
  .takeoutHeader{
    width: 91%;
    display: flex;
    margin: auto;
    padding-top: 6px;
    height: 35px;
    position: relative;
    padding-left: 5px;
  }
  .takeoutHeader h1{
    width: 10px;
    height: 14px;
    margin-right: 9px;
    line-height: 35px;
  }
  .takeoutHeader h1 img{
    width: 100%;
    height: 100%;
  }
  .takeoutHeader input{
    width: 280px;
    height: 30px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-right: 0px;
    outline: none;
    border: 2px solid #fee58d;
    text-indent: 10px;
    
  }
  .takeoutHeader button{
    width: 54px;
    height: 34px;
    border: none;
    background-color: #f7d046;
    border: 1px solid #f5c61d;
    border-radius: 15px;
    position: absolute;
    right: 8px;
  }

  .takeoutMain{
    width: 95%;   /*375px*/ 
    /* 测试高 */
    height: 1500px;
    /* background-color: #f5f5f6; */
    margin: 0 auto;
    margin-top: 10px;
  }
  /* 模块1*/
  .takeoutMain1{
    width: 307px;  /*355px */
    height: 225px;
    background-color: white;
    margin: 0 10px;
    padding: 16px 15px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border-radius: 10px;
  }
  .takeoutMain1 li{
    width: 17%;
    height: 69px;
    /* border: 1px solid red; */
  }
  .takeoutMain1 li h2{
    width: 100%;
    height: 53px;
    /* background-color: yellow; */
    text-align: center;
  }
  .takeoutMain1 li h2 img{
    width: 80%;
    height: 80%;
    margin-top: 8px;
  }
  .takeoutMain1 li p{
    font-size: 12px;
    text-align: center;
    color: #1b1914;
  }
  /* 模块2 */
  .takeoutMain2{
    width: 307px;
    height: 116px;
    background-color: #fff;
    padding: 16px 15px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border-radius: 10px;
    margin: 10px 10px;
  }
  .takeoutMain2title{
    width: 332px;
    height: 18px;
    margin-bottom: 10px;
  }
  .takeoutMain2title h2{
    width: 71px;
    height: 18px;
    float: left;
  }
  .takeoutMain2title h2 img{
    width: 100%;
    height: 100%;
  }
  .takeoutMain2title h3{
    width: 123px;
    height: 17px;
    float: left;
    margin-left: 5px;
  }
  .takeoutMain2title h3 img{
    width: 100%;
    height: 100%;
  }
  .takeoutMain2title span{
     font-size: 10px;
     font-weight: bold;
     color: #1a1a1a;
     float: right;
     position: relative;
     margin-right: 10px;
   }
  .takeoutMain2title span h4{
    width: 10px;
    height: 14px;
    display: inline-block;
    margin-left: 6px;
    position: absolute;
    top: 1px;
  }
  .takeoutMain2title h4 img{
    height: 100%;
  }
  .takeoutMain2content{
    width: 334px;
    height: 94px;
    display: flex;
  }
  .takeoutMain2content li{
    width: 77px;
    height: 93px;
    /* border: 1px solid red; */
  }
  .takeoutMain2content li h1{
    width: 70px;
    height: 70px;
    margin: auto;
    text-align: center;
    /* background-color: yellow; */
  }
  .takeoutMain2content li h1 img{
    width: 95%;
    height: 95%;
  }
  .takeoutMain2content li span{
    font-size: 11px;
    color: #ff3f18;
    font-weight: bold;
    margin-left: 4px;
  }
  .takeoutMain2content li del{
    font-size: 8px;
    color: #828485;
  }
  /* 模块3 轮播图*/
  .takeoutMain3{
    width: 335px;
    height: 90px;
    background-color: lightgreen;
    border-radius: 10px;
    margin: 10px 10px;
  }

  .takeoutMain4{
    width: 335px;
    height: 1000px;
    margin: 0px 10px 10px;
    padding-top: 17px;
    /* background-color: lightblue; */
  }
  .takeoutMain4 a{
    font-size: 17px;
    font-weight: bold;
    margin-right: 25px;
    display: inline-block;
    margin-bottom: 17px;
    color: #55595a;
    font-size: 16px;
  }
  .takeoutMain4 a:hover{
    color: #25272a;
  }
  .router-link-active{
    border-bottom: 2px solid #ffd24c;
  }
</style>